<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="">
        <thead>
            <tr>
                <th>用户名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>jack</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>jack</td>
                <td>18</td>
                <td>男</td>
            </tr>

        </tbody>
    </table>
    <script>
        /* 
            var arr = [
                        {
                        name: 'Jack',
                        age: 18,
                        gender: '男'
                        },{
                        name: 'Rose',
                        age: 20,
                        gender: '女'
                        },{
                        name: 'Top',
                        age: 22,
                        gender: '男'
                        }
                    ]
         */
        //  对象数组
        var arr = [
            {
                name: 'Jack',
                age: 18,
                gender: '男'
            }, {
                name: 'Rose',
                age: 20,
                gender: '女'
            }, {
                name: 'Top',
                age: 22,
                gender: '男'
            }
        ]
    var tobodyEle = document.getElementsByTagName("tbody")[0];
    console.log(tobodyEle)
    // 通过js 来生成table 1.不变的位置 2.动态改变的位置
    // 通过js来修改tbody里的内容
    var trHtml = "";
    for(var i=0;i<arr.length;i++){
        if(i%2==0){
            trHtml += `<tr style="background:blue"><td>${arr[i].name}</td><td>${arr[i].age}</td><td>${arr[i].gender}</td></tr>`;
        }else{
            trHtml += `<tr><td>${arr[i].name}</td><td>${arr[i].age}</td><td>${arr[i].gender}</td></tr>`;
        }
    }
    console.log(trHtml)
    tobodyEle.innerHTML = trHtml;
    </script>
</body>

</html>